<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Vue3 中在组件上可以使用多次 v-model 。传递不同的参数即可。

        <Person v-model="name" v-model:xx="msg" v-model:yy="count" />

        展开如下：

        <Person 
          :modelValue="name"
          @update:modelValue="name = $event"

          :xx="msg"
          @update:xx="msg = $event"
          
          :yy="count"
          @update:yy="count = $event"
        />

        观察如上的展开形式，可以得出，v-model="name" 其实是隐藏了 :modelValue 这个参数的感觉
          v-model="name"   ===  v-model:modelValue="name"
     -->

    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>

    <script>
      Vue.createApp({
        data() {
          return {
            name: "王八",
            msg: "hello",
            count: 10,
          };
        },

        template: `
          <div>
            <h1>根组件</h1>
            <Person v-model="name" v-model:xx="msg" v-model:yy="count" />  
          </div>
        `,
      })
        .component("Person", {
          template: `
          <div>
            <p>姓名：{{ modelValue }}</p>
            <p>xx:  {{ xx }}</p>
            <p>yy:  {{ yy }}</p>
            
            <button @click="$emit('update:modelValue', '张三')">修改 - 张三</button>
            <button @click="$emit('update:modelValue', '里斯')">修改 - 里斯</button>
            <button @click="$emit('update:modelValue', '王五')">修改 - 王五</button>

            <hr />

            <button @click="$emit('update:xx', 'world')">修改 xx => world</button>

            <hr />
            <button @click="$emit('update:yy', yy+1)">YY ++</button>
            <button @click="$emit('update:yy', yy-1)">YY --</button>
          </div>
        `,
          props: ["modelValue", "xx", "yy"],
        })
        .mount("#app");
    </script>
  </body>
</html>
